<template>
	<view class="writeOffPageContainer">
		<view class="adminContainerTop">
			<!-- 手机号到期时间 -->
			<view class="timeAccount">
				<text class="getAccount font-overflow">{{staffInfo.staffName}}</text>
				<text class="getDelayTime">到期时间 : {{ staffInfo.expirationTime}}</text>
				<image @click="exit()" class="img-45" src="../../static/45.png"></image>
			</view>
			<view class="scanCodeWriteOff" @click="scanWriteOffPopup">
				<uni-icons type="compose" size="18" style="color: #fff"></uni-icons>
				<text style="margin-left: 10rpx;">输入核销</text>
			</view>

		</view>
		<view class="list display-fw-a">
			<view @click="getList(1)">
				<image class="img-8" src="../../static/8.png"></image>
				<view>超级快推</view>
			</view>
			<view @click="getList(2)">
				<image class="img-8" src="../../static/9.png"></image>
				<view>幸运大转盘</view>
			</view>
			<view @click="getList(3)">
				<image class="img-8" src="../../static/10.png"></image>
				<view>幸运九宫格</view>
			</view>
			<view @click="getList(4)">
				<image class="img-8" src="../../static/11.png"></image>
				<view>卡券活动</view>
			</view>
			<view @click="getList(5)">
				<image class="img-8" src="../../static/41.png"></image>
				<view>线下转盘</view>
			</view>
		</view>
		<block v-if="activityList.length > 0">
			<view class="font-size_32rpx margin-left_30rpx">最新活动</view>
			<view class="list-public" style="padding: 0;margin: 20rpx 20rpx;" v-for="(item,index) in activityList"
				:key="index">
				<view class="name2">{{item.activityName}}</view>
				<view class="display-a-js color_757575" style="padding: 0 40rpx 10rpx;position: relative;">
					<view v-if="item.activityType == 1">有效时间：{{staffInfo.expirationTime}}
					</view>
					<view v-if="item.activityType == 4">有效时间：{{item.cardsettings.validTime}}</view>
					<view v-if="item.activityType == 2 || item.activityType == 3 || item.activityType == 5">
						有效时间：{{item.validTime}}</view>
				</view>
				<view class="padding-bottom_30rpx p-bo" v-if="item.releaseChannel ==2">
				</view>
				<view class="display-a padding_30rpx_0 color_757575 p-bo"
					v-if="item.releaseChannel == 1 || item.releaseChannel == 3">
					<view class="text-align_center">
						<view class="font-weight_bold font-size_30rpx margin-bottom_10rpx">{{item.likeCount}}</view>
						<view>点赞次数</view>
					</view>
					<view class="line"></view>
					<view class="text-align_center">
						<view class="font-weight_bold font-size_30rpx margin-bottom_10rpx">{{item.commentCount}}</view>
						<view>评论次数</view>
					</view>
					<view class="line"></view>
					<view class="text-align_center">
						<view class="font-weight_bold font-size_30rpx margin-bottom_10rpx">{{item.viewCount}}</view>
						<view>播放次数</view>
					</view>
					<!-- <view class="line"></view>
						<view class="text-align_center">
							<view class="font-weight_bold font-size_30rpx margin-bottom_10rpx">{{item.viewCount}}</view>
							<view>转发次数</view>
						</view> -->
				</view>
				<block v-if="item.releaseChannel == 2">
					<view class="padding-bottom_20rpx" v-if="item.activityType == 5"></view>
					<view class="display-a" v-if="item.activityType == 2 || item.activityType == 3">
						<!-- <view class="preview" style="width: 234rpx;" @click="previewPush(item.id,item.activityType)">
								预览活动</view>
							<view class="preview-line"></view> -->
						<view class="preview" @click="winning(item.id)">中奖名单</view>
						<view class="preview-line"></view>
						<view class="preview"
							@click="openQrCode(item.id,item.qrcode,item.releaseChannel,item.merchantId)">活动二维码</view>
					</view>
					<view class="display-a" v-if="item.activityType == 1 || item.activityType == 4">
						<!-- <view class="preview" @click="previewPush(item.id,item.activityType)">预览活动</view>
							<view class="preview-line"></view> -->
						<view class="preview" style="width: 710rpx;"
							@click="openQrCode(item.id,item.qrcode,item.releaseChannel,item.merchantId)">活动二维码</view>
					</view>
				</block>
				<block v-if="item.releaseChannel == 1 || item.releaseChannel == 3">
					<!-- <view class="padding-bottom_20rpx" v-if="item.activityType == 5"></view> -->
					<view class="display-a"
						v-if="item.activityType == 1 || item.activityType == 4 || item.activityType == 5">
						<view class="preview" style="width: 234rpx;" @click="previewPush(item.id,item.activityType)">
							预览活动</view>
						<view class="preview-line"></view>
						<view class="preview" style="width: 234rpx;" @click="userData(item.id)">用户数据</view>
						<view class="preview-line"></view>
						<view class="preview" style="width: 234rpx;"
							@click="openQrCode(item.id,item.qrcode,item.releaseChannel,item.merchantId)">活动二维码</view>
					</view>
					<view class="display-a" v-if="item.activityType == 2 || item.activityType == 3">
						<view class="preview" style="width: 174rpx;" @click="previewPush(item.id,item.activityType)">
							预览活动</view>
						<view class="preview-line"></view>
						<view class="preview" style="width: 174rpx;" @click="winning(item.id)">中奖名单</view>
						<view class="preview-line"></view>
						<view class="preview" style="width: 174rpx;" @click="userData(item.id)">用户数据</view>
						<view class="preview-line"></view>

						<view class="preview" style="width: 174rpx;"
							@click="openQrCode(item.id,item.qrcode,item.releaseChannel,item.merchantId)">活动二维码</view>
					</view>
				</block>
			</view>
		</block>
		<view style="height: 2rpx;"></view>
		<sunui-popup ref="pop">
			<template v-slot:content>
				<image class="qrcode" :src="qrcode"></image>
				<view class="tips">请长按二维码保存到手机</view>
			</template>
		</sunui-popup>

		<sunui-popup ref="popinvoice">
			<template v-slot:content>
				<view class="popWriteOffCode">
					<!-- 关闭按钮进行定位 -->
					<uni-icons @click='closeWriteOffIcon' class="uniIcon" type="clear" size="25"
						style="color: #07070791;">
					</uni-icons>
					<!-- 核销码 -->
					<view class="writeOffTop">
						<text class="writeOffCodeText">核销码</text>
						<text class="writeWriteOff">请您在下方输入框填写自己核销码</text>
					</view>
					<jpCoded borderCheckStyle='border: 1px solid #2255ff' :places='4' style="height: 80rpx;"
						:width="500" :codes="writeOffCode" @tokey="toOpen" @inputVal="finished"></jpCoded>
					<view class="sureWriteOff" @click='closeWriteOff'>
						确定核销
					</view>
				</view>
			</template>
		</sunui-popup>
	</view>

</template>

<script>
	import jpCoded from '@/components/jp-coded/jp-coded.vue';
	import Card from '@/components/Card/Card.vue'
	import activeDetail from '@/components/activeDetail/activeDetail.vue'
	export default {
		components: {
			Card,
			activeDetail,

			jpCoded
		},
		onLoad() {


		},

		onShow() {
			// 获取员工详情
			this.getStaffInfo()
		},

		data() {
			return {
				// 核销码
				writeOffCode: '',

				// 添加pading
				// Padding: 48,
				// 活动tabbar
				activeTab: [{
						img: '/static/8.png',
						text: '超级快推',
						type: 1,
						activityList: true
					},
					{
						img: '/static/9.png',
						text: '幸运大转盘',
						type: 2,
						activityList: true
					},
					{
						img: '/static/10.png',
						text: '幸运九宫格',
						type: 3,
						activityList: true
					},
					{
						img: '/static/11.png',
						text: '卡卷活动',
						type: 4,
						activityList: true
					},
				],
				// 获取员工详情
				staffInfo: {},
				// 活动列表
				activityList: []
			}
		},
		methods: {

			exit() {
				uni.removeStorageSync("staffId");
				uni.reLaunch({
					url: '/pages/index/login'
				})
			},

			//活动列表
			getList(type) {
				uni.navigateTo({
					url: '/pages/index/list?type=' + type + '&time=' + this.staffInfo.expirationTime
				})
			},

			//二维码
			openQrCode(id, code, type, merchantId) {
				console.log(id, code, type)
				if (type == 2) {
					uni.navigateTo({
						url: '/pages/index/videoCode?id=' + id + '&merchantId=' + merchantId
					})
				} else {

					this.qrcode = code;
					this.$refs.pop.show({
						style: 'background-color:#fff;width:600rpx;border-radius:10rpx;padding:50rpx;',
						bottomClose: true,
					});
				}
			},

			//中奖名单
			winning(id) {
				uni.navigateTo({
					url: '/pages/index/winning?id=' + id
				})
			},

			//活动数据
			userData(id) {
				uni.navigateTo({
					url: '/pages/index/userData?id=' + id
				})

			},

			//预览活动
			previewPush(id, type) {
				if (type == 1) {
					uni.navigateTo({
						url: '/pages/index/previewPush?id=' + id
					})
				}
				if (type == 2) {
					uni.navigateTo({
						url: '/pages/index/previewTurntable?id=' + id
					})
				}
				if (type == 3) {
					uni.navigateTo({
						url: '/pages/index/previewSquared?id=' + id
					})
				}
				if (type == 4) {
					uni.navigateTo({
						url: '/pages/index/previewCoupon?id=' + id
					})
				}
			},

			//员工详情
			async getStaffInfo() {
				if (!uni.getStorageSync('staffId')) {
					uni.showModal({
						title: '登录提示',
						content: '请登录',
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({
									url: '/pages/index/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
				const result = await this.$http.post({
					url: this.$api.selectId,
					data: {
						id: uni.getStorageSync('staffId'),
						types: 2
					}
				});
				if (result.code == 2000) {
					this.staffInfo = result.data;
					uni.setStorageSync("merchantId", result.data.merchantId);
					this.getActivityList();
				} else {
					this.$sun.toast(result.msg, 'none');
				}
			},

			// 打开核销码
			scanWriteOffPopup() {
				console.log(this.$refs.popinvoice)

				this.$refs.popinvoice.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: false, //false使用户不能点击其它关闭页面
					topclose: false
				});


			},

			// 确定核销
			finished(val) {
				console.log(this.writeOffCode, val)
				if (String(val).length == 4) {
					// 进行核销
					this.writeOffCode = val
				}


			},
			// 
			async closeWriteOff() {

				if (!this.writeOffCode) {
					this.$sun.toast('请输入核销码', 'error')
					return;
				}

				if (this.writeOffCode.length != 4) {
					this.$sun.toast('请输入4位核销码', 'none')
					return;
				}

				const result = await this.$http.get({
					url: this.$api.verificationCode,
					data: {
						merchantId: uni.getStorageSync('merchantId'),
						staffId: uni.getStorageSync('staffId'),
						verificationCode: this.writeOffCode,

					}
				})
				if (result.code == 2000) {
					this.$refs.popinvoice.close();
					uni.navigateTo({
						url: '/pages/index/activeDetail?id=' + result.data + '&code=' + this.writeOffCode
					})
					this.writeOffCode = ''
				} else {
					// this.writeOffCode = ''
					// this.$refs.popinvoice.close();
					this.$sun.toast(result.msg, 'none')
				}
			},
			// 关闭核销码
			closeWriteOffIcon() {
				this.writeOffCode = ''
				this.$refs.popinvoice.close();
			},

			async getActivityList() {
				const result = await this.$http.post({
					url: this.$api.getActivity,
					data: {
						id: this.staffInfo.merchantId,
						activityType: '',
						releaseChannel: '',
						page: 1,
						limit: 2,
					}
				});
				if (result.code == 2000) {
					this.activityList = result.data.list;
				}
			},
		}
	}
</script>

<style lang="less">
	page {
		padding-bottom: 2rpx;
	}

	.img-45 {
		width: 144rpx;
		height: 44rpx;
	}

	.tips {
		width: 500rpx;
		text-align: center;
		color: #999999;
	}

	.img-8 {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 10rpx;
	}

	.list {
		width: 710rpx;
		background-color: #FFFFFF;
		padding: 26rpx 0 6rpx;
		margin: 24rpx 20rpx 30rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;

		view {
			width: 177.5rpx;
			text-align: center;
			margin-bottom: 10rpx;
		}
	}

	.preview-line {
		width: 2rpx;
		background-color: #EEEEEF;
		height: 102rpx;
	}

	.preview {
		width: 354rpx;
		color: #6568F6;
		font-size: 32rpx;
		text-align: center;
		margin: 30rpx 0;
	}

	.line {
		width: 4rpx;
		height: 20rpx;
		background-color: #A1A1A1;
		margin: 0 20rpx;
	}

	.text-align_center {
		width: 206rpx;
		// width: 144rpx;
	}

	.name2 {
		padding: 30rpx 40rpx 26rpx;
		font-weight: bold;
		font-size: 30rpx;
	}

	// flex布局的复用
	.flex() {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	// 字体样式的复用
	.fontAdmin() {
		color: #FFF;
		font-size: 40rpx;
		font-family: Roboto;
		font-weight: 700;
	}

	.writeOffPageContainer {
		position: relative;
		// height: 100%;
		// padding: 0 20rpx 0 20rpx;
		background-image: url(../../static/4.png);
		background-repeat: no-repeat;
		background-size: contain;

		.adminContainerTop {
			display: flex;
			flex-direction: column;


			.scanCodeWriteOff {

				margin: 50rpx 0;
				align-self: center;
				border-radius: 100rpx;
				background: linear-gradient(360deg, #1E6CEB 0%, #6568F6 100%);
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(78, 41, 210, 0.50);
				width: 530rpx;
				padding: 20rpx;
				// height: 90rpx;
				flex-shrink: 0;
				text-align: center;
				// line-height: 100rpx;
				color: #FFF;
				font-size: 32rpx;
			}

			.timeAccount {
				display: flex;
				flex-direction: column;
				padding-top: 26rpx;
				padding-left: 50rpx;
				// height: 176rpx;

				.getAccount {
					margin-bottom: 14rpx;
					width: 400rpx;
					font-size: 40rpx !important;
					.fontAdmin()
				}

				.getDelayTime {
					color: #F7F7F7;
					font-family: Roboto;
					font-size: 28rpx !important;
					font-style: normal;
					font-weight: 400 !important;
					line-height: normal;
					margin-bottom: 14rpx;
					.fontAdmin()
				}

			}

			.scanCodeWriteOff {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.popWriteOffCode {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			width: 750rpx;
			height: 600rpx;
			flex-shrink: 0;
			background-color: #FFF;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 54rpx 54rpx 98rpx 54rpx;

			.writeOffTop {
				display: flex;
				flex-direction: column;
				align-items: center;

				.writeOffCodeText {
					color: #333;
					font-size: 36rpx;
					font-weight: 700;
					margin-bottom: 20rpx;
				}

				.writeWriteOff {
					color: #999;
					font-size: 14px;
					margin-bottom: 66rpx;
				}
			}

			.uniIcon {
				position: absolute;
				top: 16rpx;
				right: 20rpx;
			}

			.sureWriteOff {
				margin-top: 84rpx;
				border-radius: 20rpx;
				background: #0C91F3;
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(12, 145, 243, 0.44);
				width: 624rpx;
				height: 100rpx;
				color: #FFF;
				font-size: 32rpx;
				text-align: center;
				line-height: 100rpx;
			}
		}

	}
</style>